<template>
    <div>
      支付步骤

      <el-steps :space="300" :active="nowStep" finish-status="success" align-center>
        <el-step title="选择送货地址"></el-step>
        <el-step title="确认订单"></el-step>
        <el-step title="支付订单"></el-step>
      </el-steps>
      <!--用户选择送货地址-->
      <div class="user_address" v-show="isAddressShow">
        <div class="addressMsg">
          <ul>
            <li v-for="(item,index) in userAddress" :class="{isActive:isIndex == index}" @click="chooseAddress(index,item.addressId)">
              <div class="username">{{item.streetName}}</div>
              <div class="address">{{item.userName}}</div>
              <div class="tel">{{item.tel}}</div>
            </li>
          </ul>
        </div>
        <el-button @click="toCheckedGoods">下一步</el-button>
      </div>

      <!--用户确定订单-->
      <div class="user_checkGoods" v-show="isCheckGoods" >
        <table class="table table-striped">
          <caption>商品列表</caption>
          <thead>
          <tr>
            <th>商品名称</th>
            <th>商品数量</th>
            <th>商品价格</th>
            <th>总价格</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in userGoods" v-if="item.checked == 1">
            <td>{{item.productName}}</td>
            <td>{{item.productNum}}</td>
            <td>{{item.salePrice}}</td>
            <td>{{item.productNum * item.salePrice}}</td>
          </tr>
          </tbody>
        </table>
        <div class="allNum">购买商品数量：{{allNum}}</div>
        <div class="allPrice">总价格：{{allPrice}}</div>
        <el-button @click="toPrevious">上一步</el-button>
        <el-button @click="toPay">下一步</el-button>

      </div>
    </div>
</template>

<script>
    export default {
        name: "shopStep",
        data(){
          return {
            userAddress:[],
            userGoods:[],
            isIndex:0,
            nowStep:1,
            userAddressId:'',
            isAddressShow:true,
            isCheckGoods:false,
            allNum:0,
            allPrice:0,
          }
        },
      mounted(){
          this.$http.post("/api/userCart/getUserAddress").then(res=>{
            this.userAddress=res.data.result;
          });
      },
      methods:{
        chooseAddress(index,id){
          this.isIndex=index;
          this.userAddressId=id;
        },
        toCheckedGoods(){
          this.isAddressShow=false;
          this.isCheckGoods=true;
          this.nowStep++;
          this.$http.post("/api/userCart").then(res=>{
            if(res.data.code === 200){
              this.userGoods=res.data.result;
              for(let item of this.userGoods){
                if(item.checked == 1){
                  this.allNum += item.productNum
                  this.allPrice += item.productNum*item.salePrice
                }

              }
            }else{
              this.$message.error("发生错误")
            }
          })
        },
        toPrevious(){
          this.isAddressShow=true;
          this.isCheckGoods=false;
          this.nowStep--;
        },
        toPay(){
          //生成订单
          this.$http.post("/api/userCart/toPay",{
              "userAddressId":this.userAddressId,
              "allPrice":this.allPrice
          }).then(res=>{
            if(res.data.code == 200){
              this.$message.success("购买成功")
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }
      },

    }
</script>

<style >
  .addressMsg{
    height:230px;
  }
.addressMsg ul li{
  width:200px;
  height:200px;
  border:1px solid black;
  float: left;
  list-style: none;
  margin-top:10px;
  margin-left:10px;
  cursor:pointer;
}
.addressMsg ul li.isActive{
    border:1px solid gold;
  }
</style>
